<template>
  <div class="v-graph-tab">
    <a-tabs
      v-if="graphTabs && graphTabs.length !== 0"
      :key="activeProjectId"
      ref="tab"
      :active-key="currentTabId"
      class="diagram-tab"
      hide-add
      type="editable-card"
      @change="changeTab"
      @edit="onEdit">
    
      <a-tab-pane
        v-for="(tab) in graphTabs.filter(i=>!i.inModal)"
        :key="tab.id "
        :closable="false"
        class="diagram-tab-pane"
      >
        <span slot="tab" class="top-tab" @contextmenu="handleContextMenu($event,tab)">
          {{ tab.graphNode.disabled ? '[只读]' : ''}}
          <img :src="tab.graphNode.iconPath" style="marginTop:-2px"/>
          {{ tab.graphNode.title }}
          <span class="_close-button" @mouseenter="closeHighLightId = tab.id" @mouseleave="closeHighLightId = ''" @click.stop="handleClose(tab.id)">
            <img v-show="closeHighLightId !== tab.id" src="statics/icons/app/tab-close.png" alt="">
            <img v-show="closeHighLightId === tab.id" src="statics/icons/app/tab-close-red.png" alt="">
          </span>
        </span>
        <m-graph-editor
          v-if="tab.type === 'diagram'"
          ref="graph"
          :diagram-type="tab.diagramType"
          :diagramNode="tab.graphNode"
          :visible="tab.visible"
        />

        <m-requeirement-ralation-map v-else-if="tab.type === 'relationView'" :visible="tab.visible" :map-id="tab.id"/>
        <m-dependency-matrix v-else-if="tab.type === 'matrix'" :visible="tab.visible" :table-id="tab.id"/>
        <m-requirement-table v-else-if="tab.type === 'table'" :visible="tab.visible" :table-id="tab.id"/>

      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>

import Grapheditor from 'pages/mxgraph/graphEditorCustom';
import DependencyMatrix from '../RequirementTable/DependencyMatrix';
import TraceDiagram from '../RequirementRelationMap/TraceDiagram';
import { graphHelper } from 'src/api/GraphHelper';
import RequirementTable from '../RequirementTable/RequirementTable';
import { ContextMenu } from 'components/common/ContextMenu/index';
import { GraphEditorModal } from './GraphEditorModal';
import { GraphTabUtil } from './GraphTabUtil';

export default {
  name: 'graph-tab',
  components: {
    'm-graph-editor': Grapheditor,
    'm-requirement-table': RequirementTable,
    'm-dependency-matrix': DependencyMatrix,
    'm-requeirement-ralation-map': TraceDiagram,
  },
  data() {
    return {
      events: {
        'diagram-open': this.openDiagram,
        'diagram-remove': this.handleRemoveDiagram, //// model-delete 中判断删除的元素是不是graphs中的元素，是的话就移除此tab

      },
      closeHighLightId: ''
    };
  },
  computed: {
    graphTabs(){
      return app.graphTabs;
    },
    activeTabId(){
      return app.ui.activeTabId;
    },
    currentTabId(){
      return app.ui.currentTabId;
    },
    activeProjectId(){
      return app.activeProjectId;
    }

  },
  watch: {},
  created() {
    this.$bus.onBatch(this.events);
  },
  beforeDestroy() {
    this.$bus.offBatch(this.events);

    this.$nextTick(() => {
      let domObject = document.querySelectorAll('div.mxWindow');
      for (let index = 0; index < domObject.length; index++) {
        domObject[index].style.display = 'none';
      }
    });
  },
  methods: {

    openDiagram({ id: diagramId }){
      GraphTabUtil.openDiagram(diagramId);

    },

    /**
     * 模型上删除了画布时，发射diagram-remove事件，触发此方法，关闭画布同时移除最近打开画布
     */
    handleRemoveDiagram({ id, ids }) {
      GraphTabUtil.handleRemoveDiagram({ id, ids });

    },

    onEdit(targetKey, action) {
      console.log('onEdit', targetKey, action);
      if (action === 'remove') {
        GraphTabUtil.removeDiagram(targetKey);
      } else {
      }
    },
    changeTab(activeKey) {
      console.log('changeTab');
      //// debugger;
      app.graphTabs.forEach(tab => {
        if (tab.inModal) return;
        tab.visible = false;
      });
      GraphTabUtil.changeTab(activeKey);

    },
    handleClose(id){
      this.onEdit(id, 'remove');
      this.closeHighLightId = '';
    },
    async handleContextMenu(event, tab){
      //// 暂时不开放此功能
      if (tab.type !== 'diagram') return;
      const menuItem = await ContextMenu.popup({
        x: event.clientX,
        y: event.clientY,
        //// TODO
        menuItems: [{
          label: '浮动',
          value: 'float-window'
        }]
      }).catch(err => {
        if (err) throw err;
      });
      console.log(menuItem);
      if (!menuItem) return;
      tab.inModal = true;
      tab.visible = true;
      tab.bounds = {};
      tab.bounds.x = event.clientX;
      tab.bounds.y = event.clientY;
      tab.bounds.width = 800;
      tab.bounds.height = 600;
      if (tab.id === app.activeProject.ui.currentTabId){
        const innerTabs = app.graphTabs.filter(i => !i.inModal);
        app.activeProject.ui.currentTabId = innerTabs?.[0]?.id;

      }
      
      GraphTabUtil.changeTab(tab.id);
   
      await GraphEditorModal.popup({
        tab: tab
      }).catch(err => {
        if (err) throw err;
      });

    }
  },
};
</script>
<style lang="scss">
.v-graph-tab {
	height: 100%;
	width: 100%;
	position: relative;
	background: linear-gradient(
		180deg,
		#fbfdff 0%,
		#e6f6ff 100%,
		#cae4f3 100%,
		#abd7ef 100%
	);
  .diagram-tab {
    background-color: #F7F6F6;
  }

  .top-tab {
    ._close-button {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .ant-tabs-tab {
    padding-right: 27px !important;
    padding-left: 8px !important;
  }

	.ant-tabs {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		.tabRight {
			width: 100px;
			height: 26px;
			padding: 2px;
			position: absolute;
			z-index: 1000;
			right: 8px;
			top: 1px;
			background: #e1f4ff;
			img {
				margin-left: 4px;
			}
		}
		.ant-tabs-bar {
			flex: 0 0 28px;
      height: 28px;
      border-left:0;
      border-right:0;
      margin-left:2px;
      margin-top:-1px;
			position: relative;
			z-index: 5;
		}

		.ant-tabs-content {
			flex: 1 1 300px;
			height: 300px;
			//// height: calc(100% - 30px);
			//// margin-top: 30px;

			.ant-tabs-tabpane {
				height: 100%;

				&.ant-tabs-tabpane-inactive {
					display: none;
				}
			}
		}
	}
}
</style>
